<template>
  <div class="articleList">
    <div v-if="articles.length > 0">
      <!-- 文章 -->
      <div class="article-preview clearfix" v-for="(item, index) in articles" :key="index">
        <div class="article-meta">
          <router-link :to="'/profile/' + item.author.username" v-if="item.author.image"><img :src="item.author.image"
          /></router-link>
          <router-link :to="'/profile/' + item.author.username" v-else><img src="https://static.productionready.io/images/smiley-cyrus.jpg"/></router-link>
          <div class="info">
            <router-link :to="'/profile/' + item.author.username" class="author">{{ item.author.username }}</router-link>
            <span class="date">{{ item.createdAt | formatRelativeTime }}</span>
          </div>
          <!-- <button class="btn btn-sm pull-xs-right btn-primary" v-if="item.favorited" @click.prevent="cancelFollowArtilce(item.slug, index)" >
            <i class="ion-heart"></i> {{ item.favoritesCount }}
          </button>
          <button class="btn btn-sm pull-xs-right btn-outline-primary" v-else @click.prevent="followArtilce(item.slug, index)" >
            <i class="ion-heart"></i> {{ item.favoritesCount }}
          </button> -->
        </div>
        <router-link :to="'/article/'+ item.slug" class="preview-link">
          <h1>{{ item.title }}</h1>
          <p v-html="item.body"></p>
          <span>Read more...</span>
        </router-link>
        <ul class="tag-list">
          <li v-for="tag in item.tagList" :key="tag" class="tag-pill tag-default" @click="$router.push('/article/'+ item.slug)">{{ tag }}</li>
        </ul>
      </div>
    </div>
    <div class="article-preview" v-else>
        No articles are here... yet.
    </div>
  </div>
</template>

<script>
import Pagination from './Pagination'

export default {
  name:'',
  data () {
    return {
    }
  },
  methods: {
    cancelFollowArtilce(slug, index){
      this.$emit('cancelFollowArtilce',{slug: slug, index: index})
    },
    followArtilce(slug, index){
      this.$emit('followArtilce',{slug: slug, index: index})
    },
  },
  props:{
    articles:{
      type: Array,
      required: true
    },
  },
  components:{
    Pagination
  }
}

</script>
<style lang='less' scoped>
.articleList{
  .clearfix::before, .clearfix::after{content:'';display:table;clear:both;}
  .article-preview{
    .tag-list{
      float: right;
      max-width: 50%;
      vertical-align: top;
      li{
        cursor: pointer;
      }
    }
    .tag-default{
      border: 1px solid #ddd;
      color: #aaa !important;
      background: none !important;
    }
  }
}
</style>